<template>
  <div>
    <el-card>
      <el-form :label-position="top" :model="createForm" ref="createForm">
        <el-form-item label="模组创作页面">
          <el-input v-model="createForm.title" placeholder="请输入标题"></el-input>
          <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10}" v-model="createForm.content"></el-input>
          <el-upload
              class="upload-demo"
              ref="upload"
              action="http://localhost:8081/uploadFile"
              :auto-upload="false"
              :http-request="submitFile"
              :limit="1"
              :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">不超过500kb</div>
          </el-upload>
          <el-radio-group v-model="createForm.type">
            <el-radio-button label="发布模组"></el-radio-button>
            <el-radio-button label="发布帖子"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="display: flex; float: right" @click="submitCreate">发 布</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
name: "Create",
  data () {
  return {
    createForm:{
      title:"",
      content:"",
      img:"",
      user_id:"",
      type:"发布模组"
    },
    dialogVisible: false,
    dialogImageUrl: "",
    fileList:[],
    fileName:null,
    files:null,
    formData:null,
    }
  },
  methods: {
    submitCreate() {
      // this.createForm.img = this.dialogImageUrl;
      // this.createForm.user_id = sessionStorage.getItem('id');
      // console.log(this.fileList.fileName)
      // console.log(this.fileList[0].name)

      // let {data: res} = await this.$http.post('http://localhost:8081/uploadFile', this.createForm);

      // this.$ref.upload.submit()
      // let fileFormData = new FormData();
      // fileFormData.append('file', this.$ref.upload.submit());//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
      // fileFormData.append(this.fileName, this.files);
      // this.fileList.name="test";
      // let requestConfig = {
      //   headers: {
      //     'Content-Type': 'multipart/form-data'
      //   },
      // }
      // this.$http.post(`http://localhost:8081/uploadFile`, this.formData).then((res) => {
      //   this.$message.success(res.state);
      // })
      // if (res.state === 1) {
      //   this.$message.success(res.error);
      //   this.createForm.title = "";
      //   this.createForm.user_id = "";
      //   this.createForm.content = "";
      //   this.createForm.type = "发布帖子";
      //   this.createForm.img = "";
      // } else {
      //   this.$message.error(res.error);
      // }
    },
    submitFile(item) {
      this.fileObj = item.file
      // const formData = new FormData()
      this.formData.append('file-test', this.fileObj)
    },
    beforeUpload(file){
      // debugger
      console.log(file,'文件');
      this.files = file;
      const extension = file.name.split('.')[1] === 'jpg'
      const extension2 = file.name.split('.')[1] === 'png'
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!extension && !extension2) {
        this.$message.warning('上传模板只能是 jpg、png格式!')
        return
      }
      if (!isLt2M) {
        this.$message.warning('上传模板大小不能超过 5MB!')
        return
      }
      this.fileName = "test"+file.name.split('.')[1];
      return false // 返回false不会自动上传
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    }
  }
}
</script>

<style scoped>
.el-card{
  width: 900px;
  height: 640px;
  display: flex;
  flex-direction: column;
  margin:0 !important;
  position:absolute;
  top:45%;
  left:40%;
  transform:translate(-50%,-50%);
  /*height:600px;*/
  /*max-height:calc(100% - 10px);*/
  /*max-width:calc(100% - 10px);*/
}
.el-card .el-card__body{
  flex:1;
  overflow: auto;
}
</style>
